<template>
  <div class="container">
    <div class="weui_panel weui_panel_access">
      <div class="weui_panel_bd">
        <div class="weui_media_box weui_media_appmsg" style="padding-top:5px;">
          <div class="weui_media_hd">
            <img :src="doctorPhotoUrl" alt="icon" style="width:90px;height:100px;margin-right:15px;display:block">
          </div>
          <div class="weui_media_bd" style="margin-left:30px;margin-top:30px;">
            <h4 class="weui_media_title">{{doctorName}}</h4>
            <p class="weui_media_desc">{{deptName}}</p>
          </div>
        </div>
      </div>
    </div>
    <div id="scroll-wrapper" class="scroll-wrapper">
      <div class="scroller">
        <div class="weui_cells weui_cells_access"  style="margin-top:5px;">
          <a class="weui_cell" href="javascript:;">
            <div class="weui_cell_hd">
            </div>
            <div class="weui_cell_bd weui_cell_primary">
              <p>已选:<span class="am-ft-orange">{{bookDate}}</span></p>
            </div>
          </a>
        </div>
        <div class="weui_cells_title" style="margin-top:5px;">
          <p>{{selectionTip}}</p>
        </div>
        <div class="weui_cells weui_cells_access">
          <a v-for="dt in doctorTimes" class="weui_cell" href="javascript:;" @click="goBook($index)">
            <div class="weui_cell_hd">
              <i class="fa fa-clock-o icon-color" style="width:20px;margin-right:5px;display:block;"></i>
            </div>
            <div class="weui_cell_bd weui_cell_primary">
              <p>{{dt.spanStartTime.substr(11,5)}} - {{dt.spanEndTime.substr(11,5)}} <span style="margin-left:8px;" class="blue_tag">剩 {{dt.leaveCount}}</span></p>
            </div>
            <div class="weui_cell_ft">
            </div>
          </a>
        </div>
        <partial name="footer-copyright"></partial>
      </div>
    </div>
  </div>
</template>
<style scoped>
.weui_panel {
  position: absolute;
  height: 120px;
  width: 100%;
  top: 0;
  left: 0;
}

.scroll-wrapper {
  position: absolute;
  top: 120px;
  left: 0;
  width: 100%;
  bottom: 0;
  overflow: hidden;
}

.scroller {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
}

.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.orange_tag {
  background-color: #ff8208;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
</style>
<script>
import { iScroll as IScroll } from '../../assets/lib/iscroll4/iscroll'
import { setBookSpanTime } from '../../vuex/actions'
import _ from 'underscore'

export default {
  name: 'BookDoctorTimeTableView',
  vuex: {
    getters: {
      deptName: ({ bookOrder }) => bookOrder.deptName,
      doctorId: ({ bookOrder }) => bookOrder.doctorId,
      doctorName: ({ bookOrder }) => bookOrder.doctorName,
      doctorPhotoUrl: ({ bookOrder }) => bookOrder.doctorPhotoUrl,
      parentScheduleId: ({ bookOrder }) => bookOrder.parentScheduleId,
      startTime: ({ bookOrder }) => bookOrder.startTime,
      endTime: ({ bookOrder }) => bookOrder.endTime,
      bookDate: ({ bookOrder }) => bookOrder.bookDate
    },
    actions: {
      setBookSpanTime
    }
  },
  data: function () {
    return {
      doctorTimes: [],
      selectionTip: '请选择预约时间'
    }
  },
  methods: {
    goBook: function (idx) {
      var doctorTime = this.doctorTimes[idx]
      this.setBookSpanTime(doctorTime.scheduleId, doctorTime.spanStartTime, doctorTime.spanEndTime)
      this.$router.go({ name: 'bookInfoConfirm' })
    }
  },
  ready: function () {
    var myScroll = new IScroll('scroll-wrapper', { hScroll: false, vScroll: true, hScrollbar: false, vScrollbar: false })
    this.iscroll = myScroll

    var self = this
    this.$ajax.get('GetBookDoctorTimeTable', 'Book', {
      parentScheduleId: this.parentScheduleId,
      doctorId: this.doctorId,
      startTime: this.startTime,
      endTime: this.endTime
    }).then(function (data) {
      self.doctorTimes = _.map(data.DoctorTimes, function (val) {
        return {
          scheduleId: val.ScheduleId,
          spanStartTime: val.SpanStartTime,
          spanEndTime: val.SpanEndTime,
          leaveCount: val.LeaveCount
        }
      })

      if (self.doctorTimes.length === 0) {
        self.selectionTip = '已约满'
      }

      self.$nextTick(function () {
        self.iscroll.refresh()
      })
    })
  },
  route: {
    activate: function (transition) {
      // 阻止页面刷新，刷新时直接跳往首页
      if (transition.from.name === undefined) {
        this.$router.go({ name: 'portal' })
      } else {
        transition.next()
      }
    }
  },
  iscroll: null
}
</script>
